<template>
    <div id="x6Container" ref="x6Container"></div>
    <TeleportContainer />
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { Graph, Cell, Shape } from '@antv/x6'
import HelloWorld from '../components/HelloWorld.vue'
import { register, getTeleport } from "@antv/x6-vue-shape";

const x6Container = ref();

function init() {

    register({
        shape: "custom-vue-node",
        width: 400,
        height: 200,
        component: HelloWorld,
    });

    Shape.HTML.register({
        shape: "custom-html",
        width: 160,
        height: 80,
        html(cell) {
            const div = document.createElement("div");
            div.className = "custom-html";
            div.innerText = cell.getData();
            return div;
        },
    })


    // Graph.registerVueComponent('custom-vue-node',{
    //     template: `<HelloWorld></HelloWorld>`,
    //     component: HelloWorld,
    //     width: 200,
    //     height: 200,
    // })

    const TeleportContainer = getTeleport();

    const LINE_HEIGHT = 24
    const NODE_WIDTH = 150
    const data = [
        {
            "id": "1",
            "shape": "er-rect",
            "label": "学生",
            "width": 150,
            "height": 24,
            "position": {
                "x": 24,
                "y": 150
            },
            "ports": [
                {
                    "id": "1-1",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "ID"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "1-2",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "Name"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "1-3",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "Class"
                        },
                        "portTypeLabel": {
                            "text": "NUMBER"
                        }
                    }
                },
                {
                    "id": "1-4",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "Gender"
                        },
                        "portTypeLabel": {
                            "text": "BOOLEAN"
                        }
                    }
                }
            ]
        },
        {
            "id": "2",
            "shape": "er-rect",
            "label": "课程",
            "width": 150,
            "height": 24,
            "position": {
                "x": 250,
                "y": 210
            },
            "ports": [
                {
                    "id": "2-1",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "ID"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "2-2",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "Name"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "2-3",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "StudentID"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "2-4",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "TeacherID"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "2-5",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "Description"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                }
            ]
        },
        {
            "id": "3",
            "shape": "er-rect",
            "label": "老师",
            "width": 150,
            "height": 24,
            "position": {
                "x": 480,
                "y": 350
            },
            "ports": [
                {
                    "id": "3-1",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "ID"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "3-2",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "Name"
                        },
                        "portTypeLabel": {
                            "text": "STRING"
                        }
                    }
                },
                {
                    "id": "3-3",
                    "group": "list",
                    "attrs": {
                        "portNameLabel": {
                            "text": "Age"
                        },
                        "portTypeLabel": {
                            "text": "NUMBER"
                        }
                    }
                }
            ]
        },
        {
            "id": "4",
            "shape": "edge",
            "source": {
                "cell": "1",
                "port": "1-1"
            },
            "target": {
                "cell": "2",
                "port": "2-3"
            },
            "attrs": {
                "line": {
                    "stroke": "#A2B1C3",
                    "strokeWidth": 2
                }
            },
            "zIndex": 0
        },
        {
            "id": "5",
            "shape": "edge",
            "source": {
                "cell": "3",
                "port": "3-1"
            },
            "target": {
                "cell": "2",
                "port": "2-4"
            },
            "attrs": {
                "line": {
                    "stroke": "#A2B1C3",
                    "strokeWidth": 2
                }
            },
            "zIndex": 0
        }
    ]

    Graph.registerNode(
        'er-rect',
        {
            inherit: 'rect',
            markup: [
                {
                    tagName: 'rect',
                    selector: 'body',
                },
                {
                    tagName: 'text',
                    selector: 'label',
                },
            ],
            attrs: {
                rect: {
                    strokeWidth: 1,
                    stroke: '#5F95FF',
                    fill: '#5F95FF',
                },
                label: {
                    fontWeight: 'bold',
                    fill: '#ffffff',
                    fontSize: 12,
                },
            },
            ports: {
                groups: {
                    list: {
                        markup: [
                            {
                                tagName: 'rect',
                                selector: 'portBody',
                            },
                            {
                                tagName: 'text',
                                selector: 'portNameLabel',
                            },
                            {
                                tagName: 'text',
                                selector: 'portTypeLabel',
                            },
                        ],
                        attrs: {
                            portBody: {
                                width: NODE_WIDTH,
                                height: LINE_HEIGHT,
                                strokeWidth: 1,
                                stroke: '#5F95FF',
                                fill: '#EFF4FF',
                                magnet: true,
                            },
                            portNameLabel: {
                                ref: 'portBody',
                                refX: 6,
                                refY: 6,
                                fontSize: 10,
                            },
                            portTypeLabel: {
                                ref: 'portBody',
                                refX: 95,
                                refY: 6,
                                fontSize: 10,
                            },
                        },
                        position: 'erPortPosition',
                    },
                },
            },
        },
        true,
    )
    Graph.registerNode(
        'custom-group-node',
        {
            inherit: 'rect',
            width: 80,
            height: 40,
            attrs: {
                body: {
                    stroke: '#8f8f8f',
                    strokeWidth: 1,
                    fill: '#fff',
                    rx: 6,
                    ry: 6,
                },
            },
        },
        true,
    )
    Graph.registerPortLayout(
        'erPortPosition',
        (portsPositionArgs) => {
            return portsPositionArgs.map((_, index) => {
                return {
                    position: {
                        x: 0,
                        y: (index + 1) * LINE_HEIGHT,
                    },
                    angle: 0,
                }
            })
        },
        true,
    )

    const graph = new Graph({
        container: x6Container.value,
        autoResize: true,
        background: {
            color: '#F2F7FA',
        },
        grid: {
            visible: true,
            type: 'doubleMesh',
            args: [
                {
                    color: '#eee', // 主网格线颜色
                    thickness: 1, // 主网格线宽度
                },
                {
                    color: '#ddd', // 次网格线颜色
                    thickness: 1, // 次网格线宽度
                    factor: 4, // 主次网格线间隔
                },
            ],
        },
        interacting: function (cellView) {
            if (cellView.cell.getData() != undefined && !cellView.cell.getData().disableMove) {
                return { nodeMovable: false }
            }
            return true
        },
        connecting: {
            router: {
                name: 'er',
                args: {
                    offset: 25,
                    direction: 'H',
                },
            },
            createEdge() {
                return new Shape.Edge({
                    attrs: {
                        line: {
                            stroke: '#A2B1C3',
                            strokeWidth: 2,
                        },
                    },
                })
            },
        },
    })

    // const cells = []
    // data.forEach((item) => {
    //     if (item.shape === 'edge') {
    //         cells.push(graph.createEdge(item))
    //     } else {
    //         cells.push(graph.createNode(item))
    //     }
    // })
    // graph.resetCells(cells)

    graph.addNode({
        shape: "custom-vue-node",
        x: 0,
        y: 0,
        width: 400,
        height: 200,
    });

    graph.addNode({
        shape: "custom-html",
        x: 100,
        y: 0,
        width: 200,
        height: 200,
        data:"46541231",
    });

    graph.zoomToFit({ padding: 10, maxScale: 1 })


    // graph.centerContent()
}
onMounted(() => { init() });
</script>
<style>
html,
body,
#app,
#x6Container {
    width: 100%;
    height: 100%;
}
</style>